import React, {Component} from 'react';
import ReactDOM from 'react-dom';

import SliderVerificationDialog from 'root/src/index';
import './app.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sliderVerifyVisible: false
    };
  }

  onSliderError = (param) => {
    console.log('slider error: ', param);
  };

  onSliderComplete = (param) => {
    console.log('slider success: ', param);
    this.closeSliderVerify();
  };

  closeSliderVerify = (type = 'hide') => {
    this.setState({sliderVerifyVisible: type === 'show'});
  };

  render() {
    const {sliderVerifyVisible} = this.state;
    return (
      <div className="main">
        <button onClick={this.closeSliderVerify.bind(this, 'show')}>open dialog</button>
        {sliderVerifyVisible &&
        <SliderVerificationDialog
          onClose={this.closeSliderVerify}
          onError={this.onSliderError}
          onComplete={this.onSliderComplete}/>}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('example'));
